
<template>
  <div class="affix">
    <el-button v-if="collectIdList.length" type="primary" @click="openCollectHandle"> 我的 ✿ </el-button>
  </div>
  <div v-for="( item, index) in list" :ref="`item${index}`" >
    <!-- <h2><SupportIcon /> 单选题</h2> -->
    <RadioGroup v-if="item.question_style === 1" :collectIdList="collectIdList" collectShow :item="item" :index="index" @change="(value) => radioChange(value, item)" @addCollect="addCollect"/>

    <!-- <h2><SupportIcon /> 多选题</h2> -->
    <CheckboxGroup v-else-if="item.question_style === 3" :collectIdList="collectIdList" collectShow :item="item" :index="index" @change="(value) => checkboxChange(value, item)" @addCollect="addCollect"/>
    
    <!-- <h2><SupportIcon /> 简答题</h2> -->
    <div v-else class="margin-b-15">
      <p class="font-700">{{ index+1 }}.{{item.title}}（{{item.fraction}}分）</p>
      <p>参考解析：<span>{{item.analysis}}</span>
      </p>
    </div>

  </div>

  <br/>
    <div class="save-btn">
      <el-button type="success" @click="HandleRest(3)"> 重 做 </el-button>
      <el-button type="primary" @click="saveHandle"> 提 交 </el-button>
    </div>

  <div v-if="dialogVisible">
    <Dialog v-model="dialogVisible" :showCorrectBtn="false" :list="dialogList" :collectIdList="collectIdList" :dialogType="dialogType" @addCollect="addCollect"/>
  </div>
  
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from "vue";
import RadioGroup from "./components/RadioGroup.vue";
import CheckboxGroup from "./components/CheckboxGroup.vue";
import Dialog from "./components/Dialog.vue";
import getData from '@/data/util.ts'
import data from '@/data/data.ts'

import {
  ElButton,
  ElMessage
} from "element-plus";

const instance = (getCurrentInstance()) as any; // instance 相当于以前的 `this`

let list =  ref<any[]>([])

// 收藏列表ID
let collectIdList = ref<string[]>([])

// 错题列表
let errorIds = ref<string[]>([])

//弹窗列表
let dialogType = ref< 0 | 1 | 2>(0) // 0默认 1错误  2收藏
let dialogList = ref<any[]>([])
let dialogVisible = ref<boolean>(false)

onMounted(() => { 
  list.value = getData(data)

  let cIds = localStorage.getItem('about') 
  if (cIds) { 
    collectIdList.value = JSON.parse(cIds)
  }
})

function checkboxChange(value: [], item: any) { 
  item.error = value.sort().join() !== item.correct_item.sort().join()
  //错题加入错题列表
  item.error && !errorIds.value.includes(item.question_id) && errorIds.value.push(item.question_id)
}
function radioChange(value: string, item: any) { 
  item.error = value && item.correct_item !== item.val
  //错题加入错题列表
  item.error && !errorIds.value.includes(item.question_id) && errorIds.value.push(item.question_id)
}

function saveHandle() { 
  const emptyIndex = verifyHasEmpty(list.value)
  if (emptyIndex > -1) { 
    scrollIntoRef(emptyIndex) // 滚动到空题
    return false
  }
  dialogList.value = getData(data).filter(item => errorIds.value.includes(item.question_id))
  dialogVisible.value = true
}

function scrollIntoRef(index: number) {
  instance.refs[`item${index}`][0].scrollIntoView({ behavior: 'smooth' });
}

// 校验是否存在空题
function verifyHasEmpty(list: any) {
  const empty = list.findIndex((item: any) => { 
    if (
      (item.question_style === 3 && item.val.length === 0) || //多选
      (item.question_style === 1 && !item.val)  // 单选
    ){ 
      return true
    }
  })
  if (empty > -1) { 
    ElMessage({
      message: '存在空题',
      type: 'error',
      plain: true,
    })
    return empty
  }
  return -1
}

type ResetType = 2 | 3 // 2 错题重置   3 列表重置
function HandleRest(type: ResetType) {
    list.value.forEach(item => { 
      item.val = item.question_style === 3 ? [] : ''
      item.error = false
    })

    scrollIntoRef(0)
}

//加入收藏列表
function addCollect(id: string) { 
  if (collectIdList.value.includes(id)) {
    collectIdList.value = collectIdList.value.filter(cid => cid !== id)
  } else { 
    collectIdList.value.push(id)
  }

  localStorage.setItem('about', JSON.stringify(collectIdList.value))
}

//打开收藏列表
function openCollectHandle() {
  dialogList.value = []
  dialogType.value = 2
  getData(data).forEach(item => {
    if (collectIdList.value.includes(item.question_id)) { 
      dialogList.value.push(item)
    }
    if (item.child && item.child.length) { 
      item.child.forEach((c: any) => { 
        if (collectIdList.value.includes(c.question_id)) { 
          dialogList.value.push(c)
        }
      })
    }
  })
  dialogVisible.value = true
}
</script>


<style scoped>
h4{
  font-weight: 700;
}
</style>
